<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP Page</title>
		<style>
			table.data {
				border-collapse: collapse;
				width: 100%;
				border: 1px solid #dddddd;
			}
			
			table.data>thead>tr {
				background: #5CB85C;
			}
			
			table.data>tbody>tr:nth-child(even) {
				background: #efefef;
			}
			
			table.data td,
			table.data th {
				padding: 5px;
				text-align: center;
				border: 1px solid #dddddd;
			}
			
			table.data tr:hover {
				background: #5Cee5C;
			}
			
			.pagination-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 1em;
			}
		</style>
		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
	</head>

	<body>
		<div class="row-fluid">
			<div class="span12">
				<ul class="breadcrumb">
					<li>
						<a href="#">主页</a> <span class="divider">/</span>
					</li>
					<li>
						<a href="#">老人健康信息</a> <span class="divider">/</span>
					</li>
					<li class="active">
					<a href="#">新增老人健康信息</a> <span class="divider">/</span>
					</li>
				</ul>
			</div>
		</div>
		<article>
			<menu style="text-align: center;">
				<input v-model="key" type="text" placeholder="请输入查询条件">
				<button @click="gotoPage()" class="primary">查询</button>
				<a class="btn btn-info" type="button" href="elderhealthadd.html">添加</a>
			</menu>
			<section class="grow">
				<table class="data">
					<thead>
						<tr>
							<th>序号</th>
							<th>医生</th>
							<th>老人</th>
							<th>老人健康情况</th>
							<th>老人检查状况</th>
							<th>饮食建议</th>
							<th>检查时间</th>
						</tr>
					</thead>
					<tbody id="rowsEL" v-if="result!=null">
						<tr v-for="(row,i) in result.rows">
							<td>{{i+1}}</td>
							<td>{{row.doctorId}}</td>
							<td>{{row.elderId}}</td>
							<td>{{row.bodyCondition}}</td>
							<td>{{row.content}}</td>
							<td>{{row.elderDiet}}</td>
							<td>{{row.checkTime}}</td>
							<td><button :value="row.id" @click="toclearview($event)" class="btn btn-group-lg">查看</button></td>
						</tr>
					</tbody>
				</table>
			</section>
		</article>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span4">
					
				</div>
				<div class="span4">
					<div class="pagination">
						<ul>
							<li>
								<a href="#">上一页</a>
							</li>
							<li>
								<a href="#">1</a>
							</li>
							<li>
								<a href="#">2</a>
							</li>
							<li>
								<a href="#">3</a>
							</li>
							<li>
								<a href="#">4</a>
							</li>
							<li>
								<a href="#">5</a>
							</li>
							<li>
								<a href="#">下一页</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="../../common/axios.min.js"></script>
		<script src="../../common/vue.js"></script>
		<script>
			const app = new Vue({
				el: "body>article",
				data: {
					key: null,
					result:{}
				},
				methods: {
					gotoPage: function() {
						axios.get("/elderhealth", {
								params: {
									key: this.key,
								}
							})
							.then(function(resp) {
								if(resp.code === "ok") {
									app.result = resp.data;
								} else {
									console.log(resp.message)
								}
							});
					}
				}
			});
		</script>

	</body>

</html>